<script setup>
import api from "../utils/axios.js";
import {useRouter} from "vue-router";
import {ElNotification} from "element-plus";

const router = useRouter()

const email = ref('')
const password = ref('')

function login() {
  api({
    url: "api/session",
    method: "POST",
    data: {
      email: email.value,
      password: password.value
    }
  }).then(response => {
    console.log(response)
    sessionStorage.setItem("token", response.data.token)
    ElNotification({
      title: "登录成功",
      message: "请稍等，正在跳转至主页",
      type: 'success',
      duration: 2000,
      onClose: () => {
        router.push('/')
      }
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: "登录失败",
      type: 'error',
      message: error.response.data.message
    })
  })
}
</script>

<template>
      <div class="flex flex-col gap-5 mx-auto w-auto text-center">
        <div class="text-2xl font-bold">
          欢迎使用学生成绩管理系统
        </div>
        <div class="bg-[#FAFAFA] rounded-lg p-7">
          <el-form label-position="top">
            <el-form-item label="电子邮箱地址">
              <el-input v-model="email"/>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="password"/>
            </el-form-item>
            <el-form-item>
              <el-button class="mx-auto" type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
</template>

<style scoped>

</style>